import React from 'react';

const Tooltip = ({ tooltip, onMouseEnter, onMouseLeave, onUnpin }) => {
    if (!tooltip.show || !tooltip.data) {
        return null;
    }

    return (
        <div 
            className="item-tooltip"
            style={{
                left: tooltip.position.x,
                top: tooltip.position.y,
                position: 'fixed',
                zIndex: 9999
            }}
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
        >
            <div className="tooltip-header">
                <span className="tooltip-title">{tooltip.data.itemFullName}</span>
                {tooltip.pinned && (
                    <button className="tooltip-close" onClick={onUnpin}>×</button>
                )}
            </div>
            <div className="tooltip-content">
                {tooltip.data.tableList && tooltip.data.tableList.length > 0 ? (
                    tooltip.data.tableList.map((table, idx) => (
                        <div key={idx} className="tooltip-table">
                            <div className="tooltip-table-name">{table.tableName}</div>
                            <div className="tooltip-columns">
                                <strong>统计指标:</strong>
                                <div className="tooltip-columns-grid">
                                    {table.columnList?.map((column, colIdx) => (
                                        <span key={colIdx} className="tooltip-column">
                                            {column.columnName}
                                        </span>
                                    ))}
                                </div>
                            </div>
                        </div>
                    ))
                ) : (
                    <div className="tooltip-no-data">暂无详细信息</div>
                )}
            </div>
        </div>
    );
};

export default Tooltip;